helper-center/packages/web/src/pages/showdoc/[id].vue

<template>
  <div class="max-w-screen-xl content my-0 mx-auto text-size-base overflow-hidden"
    :class="!detail ? 'flex flex-column justify-center items-center h-full' : ''">
    <div v-if="detail">
      <div class="breadcrumb my-[30px] pb-[20px] bb-1px_#EBEBEB" role="navigation">
        <n-breadcrumb separator=">" v-if="breadcrumb">
          <template v-for="(bread, index) in breadcrumb" :key="index">
            <n-breadcrumb-item :clickable="false"> {{ bread.title }}</n-breadcrumb-item>
          </template>
        </n-breadcrumb>
      </div>
      <div v-if="currentCate">
        <n-h2 class="mb-10"> {{ currentCate.title }}</n-h2>
      </div>
      <div class="w-full flex flex-row flex-nowrap">
        <div class="flex-basis-[240px] flex-grow-0 flex-shrink-0 br-1px_#EBEBEB">
          <n-tree class="left-tree" v-if="mainCategories" block-line :data="mainCategories.children"
            :default-expanded-keys="defaultExpandedKeys" :node-props="nodeProps" key-field="id" label-field="title"
            children-field="children" selectable />

        </div>
        <div class="flex-1 w-[calc(100%-80px)] px-[40px] mb-[120px] overflow-hidden">
          <div class="bb-1px_#EBEBEB color-[#999999]">
            <n-h1 class="font-700"> {{ detail.title }}</n-h1>
            <span class="flex flex-row gap-col-6 pb-[15px]">
              <p>{{ $t('publish') }} {{ dayjs(detail.createTime).format('YYYY-MM-DD') }}</p>
              <p>{{ $t('read') }} ( {{ detail.readCount }} )</p>

            </span>
          </div>

          <div class="w-full content-html" v-html="detail.content"></div>
          <div class="w-full flex justify-between pt-6 bt-1px_#EBEBEB color-[#999898]">
            <div class="prev flex flex-col">
              <span class="flex-1 text-align-left">
                {{ $t('prev_article') }} </span>
              <span class="flex-1 articleNear" v-if="articleNear[0]" @click="handleToArticle(articleNear[0])">
                {{ articleNear[0].title }}
              </span>
              <span v-else>
                暂没数据
              </span>

            </div>
            <div class="next flex flex-col ">
              <span class="flex-1 text-align-right">
                {{ $t('next_article') }}
              </span>
              <span class="flex-1 articleNear" v-if="articleNear[1]" @click="handleToArticle(articleNear[1])">
                {{ articleNear[1].title }}
              </span>
              <span v-else>
                暂没数据
              </span>
            </div>
          </div>
        </div>

        <div class="flex-basis-[240px] flex-grow-0 flex-shrink-0">
          <div class="min-h-[200px] bg-[#F5F9FF] b-r-[8px] p-[20px]">
            <n-h4 class="font-600 ext-size-base">{{ $t('main_content') }}</n-h4>
            <n-anchor :show-rail="false">
              <n-anchor-link class="text-size-base color-[#999999]" v-for="(item, index) in mainContents" :key="index"
                :title="item.text" :href="`#my-section-${index + 1}`">
              </n-anchor-link>
            </n-anchor>
          </div>
        </div>
      </div>
    </div>
    <div v-else>

      <n-empty :description="$t('no_data')">
        <template #extra>
          {{ $t('no_data_article') }}
          <n-button size="small" type="tertiary" @click="router.push('/')">
            {{ $t('go_home') }}
          </n-button>
        </template>
      </n-empty>
    </div>
  </div>
</template>

<route>
{
name: "showdoc",
meta: {
layout: "base"
}
}
</route>

<script setup lang="ts">
import {
  type ArticleDetailType,
  type ArticleDetailMenuType,
  type CategoryItem,
  getArticleDetail,
  getArticleCount,
  getCategoryTree,
  // getArticlesByCateId,
  getNearArticles,
} from '@/api'
import { htmlToTree, createAnchorNames, dayjs, findNodeById, findBreadcrumbPath, type TreeNode } from '@/utils'
import { NH1, NH2, NH4, NEmpty, NButton, NBreadcrumb, NBreadcrumbItem, NTree, NAnchor, NAnchorLink } from 'naive-ui'
import type { TreeOption } from 'naive-ui'

const route = useRoute()
const router = useRouter()

const params = route.params as {
  id?: number
}
const breadcrumb = ref<CategoryItem[]>([])
console.log('route', route)
const detail = ref<ArticleDetailType | undefined>()
const mainContents = ref<ArticleDetailMenuType[]>([])
const currentCate = ref<CategoryItem | undefined>()
const mainCategories = ref<CategoryItem[]>([])
const defaultExpandedKeys = ref<number[]>([])
const articleNear = ref<ArticleDetailType[]>([])

const nodeProps = ({ option }: { option: TreeOption }) => {
  return {
    async onClick() {
      console.log('option', option.id)
      router.replace(`/showcate/${option.id}`)
      setTimeout(() => {
        location.reload()
      }, 50)
    },
  }
}

onMounted(async () => {
  setTimeout(() => {
    const html = document.querySelector('.content-html')
    if (html) {
      createAnchorNames(html)
    }
  }, 1000)
  if (params.id) {
    await getArticleCount(+params.id)
  }
})

watchEffect(() => {
  if (params.id) {
    getArticleDetail(+params.id).then(async (data) => {
      if (data.data) {
        detail.value = data.data
        document.title = detail.value.title
        mainContents.value = htmlToTree(detail.value.content)
        if (detail.value.categoryId) {

          const res = await getCategoryTree(detail.value.categoryId)
          if (res.data) {
            mainCategories.value = res.data as CategoryItem[]
            if (mainCategories.value) {
              currentCate.value = findNodeById(
                [mainCategories.value] as unknown as TreeNode[],
                detail.value.categoryId,
              ) as unknown as CategoryItem

              defaultExpandedKeys.value = [currentCate.value.parentId]
              breadcrumb.value = findBreadcrumbPath([mainCategories.value] as unknown as TreeNode[], detail.value.categoryId)
              console.log('breadcrumb', [mainCategories.value], breadcrumb.value)
            }
          }
        }
      }
    })
    getNearArticles(+params.id).then(res => {
      if (res.data) {
        articleNear.value = res.data
      }
    })

  }
})

const handleToArticle = (article: ArticleDetailType) => {
  console.log('article', article)
  router.replace(`/showdoc/${article.id}`)
  setTimeout(() => {
    location.reload()
  }, 500)
}

</script>

<style lang="scss" scoped>
:deep(.content-html img) {
  width: 100% !important;
  height: auto;
}

:deep(.left-tree) {
  --n-node-content-height: 40px !important;
  //--n-node-color-hover: rgba(6,97,201,0.06) !important;
  //border-right: 1px solid #e5e7eb;

  .n-tree-node-wrapper {
    width: 240px;
    font-size: 16px;
  }
}

.articleNear {
  &:hover {
    cursor: pointer;
    color: #5a5a5a;
  }
}
</style>